<template>
    <div class="problem-index">
        <van-nav-bar
            :title="$t('m.Reportuser')"
            left-arrow
            @click-left="$router.back(-1)"
        />
        <div class="report-problem">
            <span class="label-list"><input type="checkbox" v-model="wrongCategory" id="problem1"/> <label for="problem1">{{$t('m.Wrongcategory')}}</label></span>
            <span class="label-list"><input type="checkbox" v-model="wrongDescriprtion" id="problem2"/> <label for="problem2">{{$t('m.Wrongdescription')}}</label></span>
            <span class="label-list"><input type="checkbox" v-model="wrongPicture" id="problem3"/> <label for="problem3">{{$t('m.Wrongpicture')}}</label></span>
            <span class="label-list"><input type="checkbox" v-model="priceIsDifferentFromListing" id="problem4"/> <label for="problem4">{{$t('m.Priceisdifferentfromlisting')}}</label></span>
            <span class="label-list"><input type="checkbox" v-model="duplicatePost" id="problem5"/> <label for="problem5">{{$t('m.Duplicate')}}</label></span>
            <span class="label-list"><input type="checkbox" v-model="prohibitedItem" id="problem6"/> <label for="problem6">{{$t('m.Prohibiteditem')}}</label></span>
            <span class="label-list"><input type="checkbox" v-model="counterfeitItem" id="problem8"/> <label for="problem8">{{$t('m.Counterfeititem')}}</label></span>
            <span class="label-list"><input type="checkbox" v-model="noLongerAvailable" id="problem9"/> <label for="problem9">{{$t('m.Nolongeravailable')}}</label></span>
            <span class="label-list"><input type="checkbox" v-model="unresponsivePoster" id="problem10"/> <label for="problem10">{{$t('m.Unresponsiveposter')}}</label></span>
            <span class="label-list"><input type="checkbox" v-model="scam" id="problem11"/> <label for="problem11">{{$t('m.Scam')}}</label></span>
            <span class="label-list"><input type="checkbox" v-model="others" id="problem7"/> <label for="problem7">{{$t('m.Others')}}</label></span>

            <van-cell-group>
                <van-field
                    v-model="reason"
                    type="textarea"
                    :placeholder="$t('m.Writereason')"
                    rows="8"
                    maxlength="300"
                    :error="haveReason"
                />
            </van-cell-group>
            <van-button size="large" class="btn" :loading="btnLoading" @click="reportProblem">{{$t('m.Reportlisting')}}</van-button>
        </div>
    </div>
</template>
<script>
    import Qs from 'qs'
    import {reportUser} from '../../static/api/mgc_api'
    export default {
        name: 'reportUser',
        data() {
            return {
                btnLoading: false,
                wrongCategory: false,
                wrongDescriprtion: false,
                wrongPicture: false,
                priceIsDifferentFromListing: false,
                duplicatePost: false,
                prohibitedItem: false,
                counterfeitItem: false,
                scam: false,
                noLongerAvailable: false,
                unresponsivePoster: false,
                others: false,
                haveReason: false,
                reason: '',
                id:''
            }
        },
        watch: {
            others () {
                if (this.others && this.reason == '') {
                    this.haveReason = true
                }else{
                    this.haveReason = false
                }
            },
            reason () {
                if (this.others && this.reason == '') {
                    this.haveReason = true
                }else{
                    this.haveReason = false
                }
            },
        },
        methods: {
            reportProblem () {

                if (this.others && this.reason == '') {
                    this.$toast('error submit~');
                    return false
                }
                if (!this.wrongCategory
                    && !this.wrongDescriprtion
                    && !this.wrongPicture
                    && !this.priceIsDifferentFromListing
                    && !this.duplicatePost
                    && !this.prohibitedItem
                    && !this.counterfeitItem
                    && !this.others
                    && !this.reason
                    && !this.noLongerAvailable
                    && !this.unresponsivePoster
                    && !this.scam
                ) {
                    this.$toast('please select~');
                    return false
                }
                let reason = ''
                reason = this.$translateLang(this.reason, 'zawgyiTounicode') || '';
                // if (this.$store.state.store.localLang == 'MM') {
                //     reason = this.$translateLang(this.reason, 'zawgyiTounicode') || '';
                // } else {
                //     reason = this.reason
                // }
                let formAjaxData = {
                    /* 新增编辑时添加的字段 start */
                    userReportedId: this.id,
                    wrongCategory: this.wrongCategory,
                    wrongDescriprtion: this.wrongDescriprtion,
                    wrongPicture: this.wrongPicture,
                    priceIsDifferentFromListing: this.priceIsDifferentFromListing,
                    duplicatePost: this.duplicatePost,
                    prohibitedItem: this.prohibitedItem,
                    counterfeitItem: this.counterfeitItem,
                    noLongerAvailable: this.noLongerAvailable,
                    unresponsivePoster: this.unresponsivePoster,
                    scam: this.scam,
                    others: this.others,
                    reason: reason,
                }
                let params = Qs.stringify(formAjaxData)
                let config = {
                    'Content-Type': 'multipart/form-data'
                }
                this.btnLoading = true
                reportUser(params, config)
                    .then((res) => {
                        if (res) {
                            if (res.data.errorID == 0) {
                                this.$toast.success('Successful')
                                this.wrongCategory = false;
                                this.wrongDescriprtion = false;
                                this.wrongPicture = false;
                                this.priceIsDifferentFromListing = false;
                                this.duplicatePost = false;
                                this.prohibitedItem = false;
                                this.counterfeitItem = false;
                                this.noLongerAvailable   = false;
                                this.unresponsivePoster = false;
                                this.scam = false;
                                this.others = false;
                                this.reason = '';
                                this.$router.back(-1);
                            } else {
                                this.$toast(res.data.message)
                            }
                            this.btnLoading = false
                        }
                    })
                    .catch((error) => {
                        this.$toast('No internet, please try again')
                        this.btnLoading = false
                    })
            },
        },
        mounted() {
            // 页面跳转进来获取参数
            this.id = this.$route.query.id || ''
        },
    }
</script>
<style>
    .problem-index .van-nav-bar{
        background-color: #FF9900;
        color: #fff;
    }
    .problem-index .van-nav-bar .van-icon{
        color: #fff;
        margin-right: 15px;
        font-size: 18px;
    }
    .problem-index .van-hairline--top-bottom:after{
        border: 1px solid #666666;
    }
</style>
<style scoped>
    .report-problem{
        padding: 0 15px;
        font-size: 14px;
    }
    .label-list {
        height: 45px;
        line-height: 45px;
        display: block;
        padding-left: 20px;
    }
    .report-problem .label-list {position: relative;}
    .report-problem .label-list input {position: absolute;visibility: hidden;}
    .report-problem .label-list input+label {
        display: block;
    }
    .report-problem .label-list input+label:before{
        content: "";
        position: absolute;
        width: 14px;
        height: 14px;
        border: 1px solid #B3B3B3;
        top: 14px;
        left: 0;
    }
    .report-problem .label-list input:checked+label:after {
        content: "";
        position: absolute;
        left: 2px;
        top: 16px;
        width: 9px;
        height: 4px;
        border: 1px solid #B3B3B3;
        border-top-color: transparent;
        border-right-color: transparent;
        -ms-transform: rotate(-60deg);
        -moz-transform: rotate(-60deg);
        -webkit-transform: rotate(-60deg);
        transform: rotate(-45deg);
    }
    .report-problem .btn{
        background: #ff9a03;
        color: #fff;
        border-radius: 6px;
        height: 45px;
        line-height: 45px;
        border-width: 0;
        margin: 15px 0;
    }
</style>
